﻿<!DOCTYPE HTML>
<html>

<head>
    <meta charset="urf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>UyMarkDown</title>
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <![endif]-->
</head>

<body style="margin:0;padding:20px;background:#f8f8f8">
    <div style="margin-top:1em">
        <textarea style="height: 400px" autocomplete="off" id="text" name="text1" class="markdown-textarea"></textarea>
    </div>

    <input type="button" value="يوللاش" id="post"/>
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.scrollto.js"></script>
    <script src="js/pagedown.js"></script>
    <script src="js/pagedown-extra.js"></script>
    <script src="js/diff.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/Qarluq.UIME.js"></script>
 
    <script> 

        var notug  = "[text]"; // Qarluq.UIME

        // textarea发生改变时创建cookie
        function cookie_add() {
            $.cookie('MarkDown',  $("#text").val(), { expires: 7 });
        }
        setInterval(cookie_add, 1000)

        // 提交
        $("#post").click(function () {
            alert($("#text").val())
        })

        $(document).ready(function () {

             $("#text").val($.cookie('MarkDown')); // 读取cookie


            var textarea = $('#text'),
                toolbar = $('<div class="markdown-editor" id="md-button-bar" />').insertBefore(textarea.parent())
            preview = $('<div id="md-preview" class="md-hidetab" />').insertAfter('.markdown-editor');

            var options = {};

            options.strings = {
                bold: 'توم خەت <strong> Ctrl+B',
                boldexample: 'توم خەت',

                italic: 'يانتو خەت <em> Ctrl+I',
                italicexample: 'يانتو خەت',

                link: 'ئۇلىنىش <a> Ctrl+L',
                linkdescription: 'ئۇلىنىش چۈشەندۈرۈلىشى',

                quote: 'نەقىل <blockquote> Ctrl+Q',
                quoteexample: 'نەقىل مەزمۇنى',

                code: 'كود <pre><code> Ctrl+K',
                codeexample: 'كود مەزمۇنى',

                image: 'رەسىم <img> Ctrl+G',
                imagedescription: 'رەسىم چۈشەندۈرۈلىشى',

                olist: 'رقەملىك تىزىملىك <ol> Ctrl+O',
                ulist: 'نۇرمال تىزىملىك <ul> Ctrl+U',
                litem: 'تىزىملىك تۈر',

                heading: 'تېما <h1>/<h2> Ctrl+H',
                headingexample: 'تېما مەزمۇنى',

                hr: 'ئايرىش سىزىقى <hr> Ctrl+R',
                more: 'ئايرىش سىزىقى چۈشەندۈرۈلىشى <!--more--> Ctrl+M',

                undo: 'ئەمەلدىن قالدۇرۇش - Ctrl+Z',
                redo: 'قايتا ئىشلىتىش - Ctrl+Y',
                redomac: 'قايتا ئىشلىتىش - Ctrl+Shift+Z',

                fullscreen: 'پۈتۈن ئېكران - Ctrl+J',
                exitFullscreen: 'پۈتۈن ئېكراندىن چىكىنىش - Ctrl+E',
                fullscreenUnsupport: 'تور كۆرگۈچىڭىز پۈتۈن ئېكران قىلىشنى قوللىمايدىكەن',

                imagedialog: '<p><b>رەسىم قىستۇرۇش</b></p><p>تۆۋەندىكى رامكىغا رەسىم ئادىرىسىنى تولدۇرۇڭ</p>',
                linkdialog: '<p><b>ئۇلىنىش قىستۇرۇش</b></p><p>تۆۋەندىكى رامكىغا ئۇلىنىش ئادىرىسىنى تولدۇرۇڭ</p>',

                ok: 'جەزىملەش',
                cancel: 'بىكار قىلىش'
            };

            var converter = new Markdown.Converter(),
                editor = new Markdown.Editor(converter, '', options),
                diffMatch = new diff_match_patch(), last = '', preview = $('#md-preview'),
                mark = '@mark' + Math.ceil(Math.random() * 100000000) + '@',
                span = '<span class="diff" />';

            // 设置markdown
            Markdown.Extra.init(converter, {
                extensions: ["tables", "fenced_code_gfm", "def_list", "attr_list", "footnotes"]
            });

            // 自动跟随
            converter.hooks.chain('postConversion', function (html) {
                // clear special html tags
                html = html.replace(/<\/?(\!doctype|html|head|body|link|title|input|select|button|textarea|style|noscript)[^>]*>/ig, function (all) {
                    return all.replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/'/g, '&#039;')
                        .replace(/"/g, '&quot;');
                });

                // clear hard breaks
                html = html.replace(/\s*((?:<br>\n)+)\s*(<\/?(?:p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|address|form|fieldset|iframe|hr|legend|article|section|nav|aside|hgroup|header|footer|figcaption|li|dd|dt)[^\w])/gm, '$2');

                if (html.indexOf('<!--more-->') > 0) {
                    var parts = html.split(/\s*<\!\-\-more\-\->\s*/),
                        summary = parts.shift(),
                        details = parts.join('');

                    html = '<div class="summary">' + summary + '</div>'
                        + '<div class="details">' + details + '</div>';
                }


                var diffs = diffMatch.diff_main(last, html);
                last = html;

                if (diffs.length > 0) {
                    var stack = [], markStr = mark;

                    for (var i = 0; i < diffs.length; i++) {
                        var diff = diffs[i], op = diff[0], str = diff[1]
                        sp = str.lastIndexOf('<'), ep = str.lastIndexOf('>');

                        if (op != 0) {
                            if (sp >= 0 && sp > ep) {
                                if (op > 0) {
                                    stack.push(str.substring(0, sp) + markStr + str.substring(sp));
                                } else {
                                    var lastStr = stack[stack.length - 1], lastSp = lastStr.lastIndexOf('<');
                                    stack[stack.length - 1] = lastStr.substring(0, lastSp) + markStr + lastStr.substring(lastSp);
                                }
                            } else {
                                if (op > 0) {
                                    stack.push(str + markStr);
                                } else {
                                    stack.push(markStr);
                                }
                            }

                            markStr = '';
                        } else {
                            stack.push(str);
                        }
                    }

                    html = stack.join('');

                    if (!markStr) {
                        var pos = html.indexOf(mark), prev = html.substring(0, pos),
                            next = html.substr(pos + mark.length),
                            sp = prev.lastIndexOf('<'), ep = prev.lastIndexOf('>');

                        if (sp >= 0 && sp > ep) {
                            html = prev.substring(0, sp) + span + prev.substring(sp) + next;
                        } else {
                            html = prev + span + next;
                        }
                    }
                }

                return html;
            });

            editor.hooks.chain('onPreviewRefresh', function () {
                var diff = $('.diff', preview), scrolled = false;

                $('img', preview).load(function () {
                    if (scrolled) {
                        preview.scrollTo(diff, {
                            offset: - 50
                        });
                    }
                });

                if (diff.length > 0) {
                    var p = diff.position(), lh = diff.parent().css('line-height');
                    lh = !!lh ? parseInt(lh) : 0;

                    if (p.top < 0 || p.top > preview.height() - lh) {
                        preview.scrollTo(diff, {
                            offset: - 50
                        });
                        scrolled = true;
                    }
                }
            });

            var input = $('#text'), th = textarea.height(), ph = preview.height();

            editor.hooks.chain('enterFakeFullScreen', function () {
                th = textarea.height();
                ph = preview.height();
                $(document.body).addClass('fullscreen');
                var h = $(window).height() - toolbar.outerHeight();

                textarea.css('height', h);
                preview.css('height', h);
            });

            editor.hooks.chain('enterFullScreen', function () {
                $(document.body).addClass('fullscreen');

                var h = window.screen.height - toolbar.outerHeight();
                textarea.css('height', h);
                preview.css('height', h);
            });

            editor.hooks.chain('exitFullScreen', function () {
                $(document.body).removeClass('fullscreen');
                textarea.height(th);
                preview.height(ph);
            });

            editor.run();

            // 编辑كۆرۈش切换
            var edittab = $('#md-button-bar').prepend('<div class="md-edittab"><a href="#md-editarea" class="active">يېزىش</a><a href="#md-preview">كۆرۈش</a></div>'),
                editarea = $(textarea.parent()).attr("id", "md-editarea");

            $(".md-edittab a").click(function () {
                $(".md-edittab a").removeClass('active');
                $(this).addClass("active");
                $("#md-editarea, #md-preview").addClass("md-hidetab");

                var selected_tab = $(this).attr("href"),
                    selected_el = $(selected_tab).removeClass("md-hidetab");

                // كۆرۈش时隐藏编辑器按钮
                if (selected_tab == "#md-preview") {
                    $("#md-button-row").addClass("md-visualhide");
                } else {
                    $("#md-button-row").removeClass("md-visualhide");
                }

                // كۆرۈش和编辑窗口高度一致
                $("#md-preview").outerHeight($("#md-editarea").innerHeight());

                return false;
            });
        });

    </script>

    
</body>

</html>